<!DOCTYPE html>
<html lang="zh-Hans">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>成语接龙挑战</title>
        <link rel="shortcut icon" href="favicon.png" type="image/png">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="container" id="app">
            <div class="main-menu" v-if="!gameStarted">
                <h1>成语接龙挑战</h1>
                <div class="player-info" v-if="playerName">
                    <p>欢迎回来，{{playerName}}！</p>
                    <button class="change-name-btn" @click="changeName">修改名字</button>
                </div>
                <div class="difficulty-select">
                    <h2>选择难度</h2>
                    <select v-model="difficulty">
                        <option value="easy">简单 (90秒)</option>
                        <option value="normal">普通 (60秒)</option>
                        <option value="hard">困难 (30秒)</option>
                    </select>
                </div>
                <button class="start-btn" @click="startGame">开始游戏</button>
                <button class="leaderboard-btn" @click="showLeaderboardModal">排行榜</button>
                <div class="achievements-summary">
                    <h3>成就进度</h3>
                    <div class="achievement-list">
                        <div class="achievement" :class="{ unlocked: achievements.firstWin }">
                            <span class="achievement-icon">🏆</span>
                            <span class="achievement-name">初露锋芒</span>
                        </div>
                        <div class="achievement" :class="{ unlocked: achievements.comboMaster }">
                            <span class="achievement-icon">⚡</span>
                            <span class="achievement-name">连击大师</span>
                        </div>
                        <div class="achievement" :class="{ unlocked: achievements.speedMaster }">
                            <span class="achievement-icon">⚡</span>
                            <span class="achievement-name">神速</span>
                        </div>
                        <div class="achievement" :class="{ unlocked: achievements.timeMaster }">
                            <span class="achievement-icon">⏰</span>
                            <span class="achievement-name">时间大师</span>
                        </div>
                    </div>
                </div>
                <div class="rules">
                    <h3>游戏规则</h3>
                    <p>1. 输入的成语必须与上一个成语的末字相连（可以是同音字）</p>
                    <p>2. 不能重复使用已经用过的成语</p>
                    <p>3. 时间用完游戏结束</p>
                    <p>4. 使用同音字接龙同样有效（例如：快马加鞭 -> 便宜行事）</p>
                    <p>5. 连续答对可以获得连击加分</p>
                </div>
            </div>
            
            <div class="game-container" v-else>
                <div class="game-header">
                    <div class="player-score">
                        <span class="score-label">得分</span>
                        <span class="score-value">{{score}}</span>
                    </div>
                    <div class="combo-counter" v-if="combo > 1">
                        <span class="combo-label">连击</span>
                        <span class="combo-value">×{{combo}}</span>
                    </div>
                    <div class="time-display">
                        <span class="time-label">时间</span>
                        <span class="time-value" :class="{ warning: isTimeWarning }">{{formattedTime}}</span>
                    </div>
                </div>
                
                <div class="timer-bar">
                    <div class="timer" :style="{width: timePercentage + '%'}" :class="{ warning: isTimeWarning }"></div>
                </div>
                
                <div class="current-word">
                    <div class="word-display">
                        <div class="character" v-for="(char, index) in currentWord.word" :key="index">
                            <div class="pinyin">{{currentWord.pinyin[index]}}</div>
                            <div class="hanzi">{{char}}</div>
                        </div>
                    </div>
                    <div class="meaning">{{currentWord.explanation}}</div>
                </div>

                <div class="input-area">
                    <div class="score">得分：{{score}}</div>
                    <form @submit.prevent="checkAnswer">
                        <input type="text" v-model.trim="userInput" placeholder="请输入成语..." autocomplete="off">
                        <button type="submit">确定</button>
                        <button type="button" @click="getHint" class="hint-btn">提示</button>
                    </form>
                </div>

                <div class="history">
                    <h3>已用成语</h3>
                    <div class="word-list">
                        <div v-for="word in usedWords" :key="word" class="used-word">{{word}}</div>
                    </div>
                </div>
            </div>
            
            <!-- 排行榜弹窗 -->
            <div class="modal" v-if="showLeaderboard">
                <div class="modal-content leaderboard">
                    <h2>排行榜</h2>
                    <table>
                        <thead>
                            <tr>
                                <th>排名</th>
                                <th>玩家</th>
                                <th>分数</th>
                                <th>难度</th>
                                <th>最大连击</th>
                                <th>日期</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(record, index) in leaderboard" :key="index">
                                <td>{{index + 1}}</td>
                                <td>{{record.name}}</td>
                                <td>{{record.score}}</td>
                                <td>{{record.difficulty}}</td>
                                <td>{{record.maxCombo}}</td>
                                <td>{{record.date}}</td>
                            </tr>
                        </tbody>
                    </table>
                    <button class="close-btn" @click="showLeaderboard = false">关闭</button>
                </div>
            </div>
            
            <!-- 成就提示 -->
            <div class="achievement-popup" v-if="showAchievement">
                <div class="achievement-content">
                    <h3>🎉 解锁成就！</h3>
                    <p>{{achievementMessage}}</p>
                </div>
            </div>
            
            <!-- 游戏结束弹窗 -->
            <div class="game-over" v-if="showGameOver">
                <div class="game-over-content">
                    <h2 v-if="isNewHighScore" class="new-high-score">新纪录！</h2>
                    <h2 v-else>游戏结束</h2>
                    <p class="final-score">您的得分：{{score}}分</p>
                    <p v-if="isNewHighScore" class="congrats">恭喜您打破记录！</p>
                    <div class="game-over-stats">
                        <div class="stat-item">
                            <span class="stat-label">最大连击</span>
                            <span class="stat-value">{{maxCombo}}</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">难度</span>
                            <span class="stat-value">{{difficulty}}</span>
                        </div>
                    </div>
                    <div class="game-over-buttons">
                        <button class="restart-btn" @click="restartGame">
                            <span class="btn-icon">🔄</span>
                            重新开始
                        </button>
                        <button class="menu-btn" @click="backToMenu">
                            <span class="btn-icon">🏠</span>
                            返回主菜单
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <script src="js/vue.min.js"></script>
        <script src="js/game.js"></script>
    </body>
</html>
